<template>
  <div>
    <div  @click="cutmoduleClick" class="cutmodule">
      <div ref="aHtml" data-a="1" :class="isDivActive?'divActive':''">{{$t('Attendance.AttendanceManage')}}</div>
      <div data-a="2" :class="!isDivActive?'divActive':''">{{$t('Attendance.AttendanceStatistics')}}</div>
    </div>
    <div v-if="isDivActive" class="list-area">
      <div class="setting-area glo-content-area">
        <div class="btns glo-btn-group">
          <Button
            type="primary"
            @click="showCreate"
            v-if="allPermissions.AttendanceAdd"
          >{{$t('Attendance.AttendanceAdd')}}</Button>
        </div>
        <div class="title">{{$t('Attendance.AttendanceManage')}}</div>
      </div>

      <!-- <div class="glo-selection">
        <Alert show-icon>
          已选择 {{ selection.length }} 项
          <a class="glo-selection-clean" @click="handleSelectionAllStatus(false)">清空</a>
        </Alert>
      </div> -->

      <div class="glo-search-area">
        <div class="widget-item glo-clear-after">
          <div class="widget-label">{{ $t("areaIndex.areaManName") }}：</div>
          <Input
            v-model="areaNameS"
            :placeholder="$t('areaIndex.areaManNameS')"
            search
            :enter-button="$t('devicesIndex.devNumberBtn')"
            @on-search="$_page_update"
          />
        </div>
      </div>
      <Table
        ref="table"
        class="list"
        :data="list"
        :columns="columns"
      />
        <!-- @on-selection-change="handleSelection" -->

      <Page
        class="glo-content-area glo-pagenation"
        :total="total"
        :pageSize="pageSize"
        show-sizer
        :current="page"
        show-total
        @on-change="$_page_pageChange"
        @on-page-size-change="$_page_pageSizeChange"
      />
    </div>

    <div v-if="!isDivActive" class="list-area">
      <div class="setting-area glo-content-area">

        <Tabs :value="AttendanceType" type="card" @on-click="changeIndex">
          <TabPane :label="$t('Attendance.AttendanceMonthly')" name="AttendanceMonthly"></TabPane>
          <TabPane :label="$t('Attendance.AttendanceDay')" name="AttendanceDay"></TabPane>
        </Tabs>
      </div>

      <!-- <div class="glo-selection">
        <Alert show-icon>
          {{$t('devicesIndex.devSelected')}} {{ selection.length }} {{$t('devicesIndex.devItem')}}
          <a class="glo-selection-clean" @click="handleSelectionAllStatus(false)">{{$t('devicesIndex.devEmpty')}}</a>
        </Alert>
      </div> -->
      <div v-show="AttendanceType=='AttendanceMonthly'">
        <div class="glo-search-area">
          <div class="widget-item glo-clear-after">
            <div class="widget-label">{{$t('Attendance.AttendanceStatisticsTime')}}</div>
            <DatePicker format="yyyy-MM"
            :value="searchcustomDay"
            v-model="searchcustomDay"
            :clearable= 'false'
            type="month"
            :placeholder="$t('Attendance.AttendanceTime')"></DatePicker>
          </div>

          <div class="widget-item glo-clear-after" style="width:210px">
            <div class="widget-label">{{$t('BodyTemperatureIndex.BodyTemAnimalDepartment')}}</div>
            <Cascader :data="recordTypes" v-model="recordType" 
            @on-change="handleChange1"
            @on-visible-change="handleChange" change-on-select></Cascader>
          </div>
          <div class="widget-item glo-clear-after">
            <div class="widget-label">{{ $t("staffIndex.staffphotosName") }}：</div>
            <Input
              v-model="searchareaNameS"
              :placeholder="$t('areaIndex.areaManNameS')"
              search
              :enter-button="$t('devicesIndex.devNumberBtn')"
              @on-search="searcName"
            />
          </div>

          <div class="widget-item glo-clear-after">
            <i-button style="margin-top: 36px;" type="primary" @click="staffTransferClick" v-if="allPermissions.AttendanceExport">{{ $t("Attendance.AttendanceExport") }}</i-button>
          </div>
        </div>
        <Table
          ref="table"
          class="list"
          :data="listError"
          :columns="columnsError"
          @on-selection-change="handleSelectionError"
        />
        <Page
          class="glo-content-area glo-pagenation"
          :total="totalError"
          :pageSize="pageSizeError"
          show-sizer
          :current="pageError"
          show-total
          @on-change="pageChangeError"
          @on-page-size-change="pageSizeChangeError"
        />
      </div>
      <div v-show="AttendanceType=='AttendanceDay'">
        <!-- <div>
          <Checkbox-group v-model="tableColumnsChecked" @on-change="changeTableColumns">
            <Checkbox label="show">Show</Checkbox>
            <Checkbox label="weak">Weak</Checkbox>
            <Checkbox label="signin">Signin</Checkbox>
            <Checkbox label="click">Click</Checkbox>
            <Checkbox label="active">Active</Checkbox>
            <Checkbox label="day7">7, retained</Checkbox>
            <Checkbox label="day30">30, retained</Checkbox>
            <Checkbox label="tomorrow">The next day left</Checkbox>
            <Checkbox label="day">Day Active</Checkbox>
            <Checkbox label="week">Week Active</Checkbox>
            <Checkbox label="month">Month Active</Checkbox>
          </Checkbox-group>
          <Table :data="tableData2" :columns="tableColumns2" border ></Table>
        </div> -->
        <div class="glo-search-area">
          <div class="widget-item glo-clear-after">
            <div class="widget-label">{{$t('Attendance.AttendanceStatisticsTime')}}</div>
            <DatePicker 
            
            v-model="searchcustomDay1"
            :clearable= 'false'
            type="daterange"
            placement="bottom-end"
            :placeholder="$t('Attendance.AttendanceTime')"></DatePicker>
          </div>

          <div class="widget-item glo-clear-after" style="width:210px">
            <div class="widget-label">{{$t('BodyTemperatureIndex.BodyTemAnimalDepartment')}}</div>
            <Cascader :data="recordTypes" v-model="recordType1"
            @on-change="handleChange2"
            
            change-on-select></Cascader>
          </div>
          <div class="widget-item glo-clear-after">
            <div class="widget-label">{{ $t("staffIndex.staffphotosName") }}：</div>
            <Input
              v-model="searchareaNameS1"
              :placeholder="$t('areaIndex.areaManNameS')"
              search
              :enter-button="$t('devicesIndex.devNumberBtn')"
              @on-search="getDayList"
            />
          </div>

          <div class="widget-item glo-clear-after">
            <i-button style="margin-top: 36px;" type="primary" @click="staffTransferClickDay" v-if="allPermissions.AttendanceExport">{{ $t("Attendance.AttendanceExport") }}</i-button>
          </div>
        </div>
        <Table
          ref="tableDay"
          class="list"
          :data="listDay"
          :columns="columnsDay"
        />
        <Page
          class="glo-content-area glo-pagenation"
          :total="totalDay"
          :pageSize="pageSizeDay"
          show-sizer
          :current="pageDay"
          show-total
          @on-change="pageChangeDay"
          @on-page-size-change="pageSizeChangeDay"
        />
      </div>
      
    </div>
    <AreaEdit
      v-if="ifCreate"
      @close="closeCreate"
    />
    <Modal
        class="modalClass"
        v-model="clickMouthM"
        :title="$t('Attendance.AttendanceData')"
        width = '360'
        >
        <div class="index-time-choose-f">
	        <div class="index-time-choose">
            <DatePicker format="yyyy-MM-dd" class="index-time" v-model="customDay" :value="customDay" type="date" open readOnly disabled multiple placeholder="Select date" placement="top">
              
            </DatePicker>
          </div>
        </div>
      <div slot="footer"></div>
    </Modal>
    <Modal
        class="modalClass1"
        v-model="showClickPerson"
        :title="$t('areaIndex.areaAddExamine')+$t('Attendance.AttendanceStaffAttendance')"
        width = '500'
        @on-visible-change="modelChange"
        >
        <div class="tipTitle">
          <span class="del">{{ $t("newDevices.total") }}{{ currentValue.length }}{{ $t("BodyTemperatureIndex.BodyTemAnimalMan") }}</span>
          <!-- <span class="del">{{ $t("devicesListSettings.devListDel") }}{{ $t("Attendance.AttendanceStaffAttendance") }}</span> -->
        </div>
        <div class="person-list">
          <div
            class="person-item"
            v-for="(user, idx) in currentValue" :key="idx"
          >
            <Icon class="item-icon" type="md-contact" size="24" />
            <div class="item-title">{{ user.username }}</div>
            <span class="fl" @click="handleDeleteGroupMember(user.mid,idx)">{{ $t("devicesListSettings.devListDel") }}</span>
            <!-- <Icon class="close-icon" @click="handleDeleteGroupMember(user.mid,idx)" type="md-close-circle" size="22" /> -->
          </div>
        </div>
      <div slot="footer"></div>
    </Modal>
    <AreaEdit
      v-if="ifUpdate"
      edit-type="update"
      :edit-item="editItem"
      @close="closeUpdate"
    />
  </div>
</template>

<script>
import {
  getList,
  getDayList,
  del,
  statisticalList,
  detail,
  deleteGroupMember,
} from '@/api/Attendance.js'
import {
  getPhoto,
  getExcel,
} from '@/api/public.js'
import {
  format
} from '@/utils/auth.js'
import pageMixin from '@/utils/mixins/pageMixin.js'

import AreaEdit from './components/AreaEdit'
import ListSettings from './components/ListSettings'

export default {
  mixins: [
    pageMixin,
  ],
  components: {
    AreaEdit,
  },

  data () {
    return {
      isDivActive: true,
      recordTypes: [],
      recordType: [''],
      searchcustomDay: '',
      searchareaNameS: '',
      departsdata: '',
      clickMouthM: false,
      showClickPerson: false,
      currentValue:[],
      customDay: [],
      list: [],
      columns: [
        // { type: 'selection' },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('Attendance.AttendanceName'),
          key: 'name',
        },
        {
          title: this.$t('Attendance.AttendanceShift'),
          key: 'startTime',
          render (h, { row }) {
            let label = '-'
            if (row.startTime && row.endTime) {
              label = `${row.startTime}-${row.endTime}`
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('Attendance.AttendanceData'),
          key: 'checkDate',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let labelBtn = ''
            var that = this
            if (row.checkDate) {
              // //console.log(newArr)
              label = row.checkDate
            }
            if (row.checkType == 0) {
              labelBtn = ''
              let aWeek = [this.$t('Attendance.AttendanceMonday'), this.$t('Attendance.AttendanceTuesday'), this.$t('Attendance.AttendanceWednesday'), this.$t('Attendance.AttendanceThursday'), this.$t('Attendance.AttendanceFriday'), this.$t('Attendance.AttendanceSaturday'), this.$t('Attendance.AttendanceSUN')]
              let weekD = label.split(',')
              let newWeek = ''
              weekD.forEach((item, index) => {
                newWeek += aWeek[item - 1] + ','
              })
              // //console.log(newWeek)
              label = `${this.$t('Attendance.AttendanceCyclic')}：${newWeek.substr(0, newWeek.length - 1)}`
            } else {
              var aMouth = [
                { mouthData: '', mouth: '01', mouthNum: this.$t('Attendance.AttendanceOne') },
                { mouthData: '', mouth: '02', mouthNum: this.$t('Attendance.AttendanceTwo') },
                { mouthData: '', mouth: '03', mouthNum: this.$t('Attendance.AttendanceThree') },
                { mouthData: '', mouth: '04', mouthNum: this.$t('Attendance.AttendanceFour') },
                { mouthData: '', mouth: '05', mouthNum: this.$t('Attendance.AttendanceFive') },
                { mouthData: '', mouth: '06', mouthNum: this.$t('Attendance.AttendanceSix') },
                { mouthData: '', mouth: '07', mouthNum: this.$t('Attendance.AttendanceSever') },
                { mouthData: '', mouth: '08', mouthNum: this.$t('Attendance.AttendanceEight') },
                { mouthData: '', mouth: '09', mouthNum: this.$t('Attendance.AttendanceNine') },
                { mouthData: '', mouth: '10', mouthNum: this.$t('Attendance.AttendanceTen') },
                { mouthData: '', mouth: '11', mouthNum: this.$t('Attendance.AttendanceEleven') },
                { mouthData: '', mouth: '12', mouthNum: this.$t('Attendance.AttendanceTwelve') },
              ]
              var aMa = label.split(',')
              aMa.forEach((item, index) => {
                aMouth.forEach((item1, index1) => {
                  var aItem = item.split('-')
                  if (item1.mouth == aItem[1]) {
                    item1.mouthData += aItem[2] + '、'
                  }
                })
              })

              // var a = []
              // aMa.forEach((item, index) => {
              //   let aItem = item.split('-')
              //   if (a.length==0) {
              //     let an = {
              //       mouthData:'',
              //       mouth:'',
              //     }
              //     an.mouth = aItem[1]
              //     an.mouthData = aItem[2]+ '、' 
              //     a.push(an)
              //   }else{
              //     a.forEach((item1, index1) => {
              //       if (item1.mouth == aItem[1]) {
              //         item1.mouthData += aItem[2] + '、' 
                     
              //       }else{

              //         let an = {
              //           mouthData:'',
              //           mouth:'',
              //         }
              //         an.mouth = aItem[1]
              //         an.mouthData = aItem[2]+ '、' 
              //         a.push(an)
              //       }
              //     })
              //   }
              // })
              // //console.log(a)
              // return

              //console.log(aMouth)
              let aData = ''
              aMouth.forEach((item, index) => {
                if (item.mouthData) {
                  aData += item.mouthNum + '：' + item.mouthData
                }
              })
              //console.log(aData)
              //console.log(aData.length)
              if (aData.length > 50) {
                aData = aData.slice(0,50) + '...'
              }
              //console.log(aData)
              label = aData
              labelBtn = this.$t('Attendance.AttendanceReadMore')
            }
            // return h('div', label)
            return h('div',[
              h ('span',
                {
                  style: { },
                  //就是这里加的属性
                  domProps: {
                    // title: label,
                  }
                },
                  label
              ),h('div',
                {
                  style: { color: '#2d8cf0', cursor: 'pointer'},
                  props: { row },
                  on: {
                    click: (e) => {
                      this.clickMouth(row)
                    }
                  },
                }, ' ' + labelBtn),
            ],)
          },
        },
       {
          title: this.$t('Attendance.AttendanceStaffAttendance'),
          key: 'username',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let btnLabel = this.$t('areaIndex.areaAddExamine')
            var that = this
            if (row.username) {
              let newArr = row.username
              // //console.log(newArr)
              label = row.username.split(',')
              // if (newArr.length > 4) {
              //   var aLenth = label.length
              //   label = label.slice(0, 4)
              //   //console.log(label)
              //   label = `${label.join()}...${this.$t('Attendance.AttendanceWait')}${aLenth}${this.$t('Attendance.AttendancePersonage')}`

              // } else {
              //   label = label.join()
              // }
              // //console.log(newArr.length)
              label = row.username.split(',')
              if (newArr.length > 10) {
                var aLenth = row.count
                newArr = newArr.slice(0, 10)
                label = `${newArr}...${this.$t('Attendance.AttendanceWait')}${aLenth}${this.$t('Attendance.AttendancePersonage')}`
              }else{
                label = newArr
              }

            }
            // return h('div', label)
            return h('div',[
              
              h(
              'span',
                {     
                      style: { },
                   //就是这里加的属性
                  domProps: {
                    //  title: row.username
                   }
              },
               label
              ),h(
              'span',
                {     
                  style: { color : '#2d8cf0'},
                   props: { row },
              },
               ' '),
              h(
              'Button',
                {  
                  style: { padding:'1px',color:'#2d8cf0',display:row.username?'inline-block':'none'},
                  props: { row,size:'small',type:"text"},
                  on: {
                    click: (e) => {
                      this.clickPerson(row)
                    }
                  },
              },
               btnLabel
              ),
              ],)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ],
      isExcelTrue: '1',
      listError: [],
      pageError: 1,
      pageSizeError: 20,
      totalError: 0,
      selection: [],
      columnsError: [
        // {
        //   type: 'selection',
        //   width: 60,
        // },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_methodErr,
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'photo',
          width: 140,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'username',
        },
        {
          title: this.$t('BodyTemperatureIndex.BodyTemAnimalDepartment'),
          key: 'departName',
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
        },
        {
          title: this.$t('Attendance.AttenddeserveWorkDays'),
          key: 'deserveWorkDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
     
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeserveWorkDays')}`,
                    // title: `${this.$t('Attendance.AttenddeserveWorkDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeGooutDays'),
          key: 'deservePayAndTripGooutDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeGooutDays')}`,
                    // title: `${this.$t('Attendance.AttenddeGooutDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeabsenceDays'),
          key: 'absenceDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
         
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeabsenceDays')}`,
                    // title: `${this.$t('Attendance.AttenddeabsenceDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddelateCount'),
          key: 'lateCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddelateCount')}`,
                    // title: `${this.$t('Attendance.AttenddelateCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeearlyCount'),
          key: 'earlyCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeearlyCount')}`,
                    // title: `${this.$t('Attendance.AttenddeearlyCount')}`,
                  },
                }),
              ])
          },
        },
      ],
      ifCreate: false,
      ifUpdate: false,
      editItem: null,
      areaNameS: '',
      allPermissions:{
        AttendanceAdd:false,
        verListSettingsEdit:false,
        verListSettingsDel:false,
        AttendanceExport:false,
      },
      itemId:'',
      //考勤日報表
      AttendanceType:'AttendanceMonthly',
      listDay: [],
      pageDay: 1,
      pageSizeDay: 20,
      totalDay: 0,
      columnsDay: [
        // {
        //   type: 'selection',
        //   width: 60,
        // },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_methodErr,
        },
        {
          title: this.$t('Attendance.AttendanceData'),
          key: 'inDate',
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'photo',
          width: 140,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'username',
        },
        {
          title: this.$t('BodyTemperatureIndex.BodyTemAnimalDepartment'),
          key: 'departName',
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
        },
        
        
        
        {
          title: this.$t('Attendance.AttenddelateCount'),
          key: 'lateCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddelateCount')}`,
                    // title: `${this.$t('Attendance.AttenddelateCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.lateTimes'),
          key: 'lateTimes',
        },
        {
          title: this.$t('Attendance.AttenddeearlyCount'),
          key: 'earlyCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeearlyCount')}`,
                    // title: `${this.$t('Attendance.AttenddeearlyCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.earlyTimes'),
          key: 'earlyTimes',
        },
        {
          title: this.$t('Attendance.beOnDutyDate'),
          key: 'beOnDutyDate',
          width:100
        },
        {
          title: this.$t('Attendance.beOnDuty'),
          key: 'beOnDuty',
          render: (h, { row }) => {
            let label = '-'
            if (row.beOnDuty) {
              if(row.beOnDuty=='Normal'){
                label = `${this.$t('Attendance.Normal')}`
              }
              else if(row.beOnDuty=='Early'){
                label = `${this.$t('Attendance.Early')}`
              }
              else if(row.beOnDuty=='Late'){
                // label = `遲到`
                console.log(this.$t('Attendance.Late'))
                label = 
                this.$t('Attendance.Late')
              }
              else if(row.beOnDuty=='NoTime'){
                label = `${this.$t('Attendance.NoTime')}`
              }
              else if(row.beOnDuty=='NotScheduling'){
                label = `${this.$t('Attendance.NotScheduling')}`
              } 
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('Attendance.offDutyDate'),
          key: 'offDutyDate',
          width:100
        },
        {
          title: this.$t('Attendance.offDuty'),
          key: 'offDuty',
          render: (h, { row }) => {
            let label = '-'
            if (row.offDuty) {
              if(row.offDuty=='Normal'){
                label = `${this.$t('Attendance.Normal')}`
              }
              else if(row.offDuty=='Early'){
                label = `${this.$t('Attendance.Early')}`
              }
              else if(row.offDuty=='Late'){
                label = `${this.$t('Attendance.Late')}`
              }
              else if(row.offDuty=='NoTime'){
                label = `${this.$t('Attendance.NoTime')}`
              }
              else if(row.beOnDuty=='NotScheduling'){
                label = `${this.$t('Attendance.NotScheduling')}`
              } 
            }
            return h('div', label)
          },
        },
      ],
      //日報
      searchcustomDay1: ["",""],
      searchareaNameS1:'',
      recordType1: [''],
      departsdata1:'',
      isExcelTrueDay:'1',
      //考勤日報表
      // data1: [
      //   { genre: 'Sports', sold: 275 },
      //   { genre: 'Strategy', sold: 115 },
      //   { genre: 'Action', sold: 120 },
      //   { genre: 'Shooter', sold: 350 },
      //   { genre: 'Other', sold: 150 },
      // ],
      // tableData2: this.mockTableData2(),
      // tableColumns2: [],
      // tableColumnsChecked: ['show', 'weak', 'signin', 'click', 'active', 'day7', 'day30', 'tomorrow', 'day', 'week', 'month'],
    }
  },

  mounted () {
    //console.log(document.title)
    // document.title = '123456'
    this.$_page_update()
    // this.cutmoduleClick()
    // 第一次点击无效，加载先点击一次
    this.$refs.aHtml.click()

    this.getDataList()

    const myDate = new Date()
    const year = myDate.getFullYear() // 获取当前年份
    const month = myDate.getMonth() + 1 // 获取当前月份(0-11,0代表1月所以要加1);
    // 日期格式：2019/07/29 - 2019/07/29
    this.searchcustomDay = `${year}-${month}`
    let aa = {
      a:'123',
      bb:{
        a:'123',
      }
    }
    let bbb = {
      'ss':'123',
    }
    Object.assign(bbb,aa)
    // console.log(bbb)
    this.getAllPermissions()
  },

  methods: {
    getAllPermissions(){
      let da=JSON.parse(window.localStorage.getItem('logo'))||[]
      da.map(v => {
        if(v.permission=='#attendance'&&v.children){
          v.children.map(a=>{
            if(a.permission=='#AttendanceAdd'&&a.checked==='true'){
              this.allPermissions.AttendanceAdd=true
            }
            if(a.permission=='#verListSettingsEdit3'&&a.checked==='true'){
              this.allPermissions.verListSettingsEdit=true
            }
            if(a.permission=='#verListSettingsDel3'&&a.checked==='true'){
              this.allPermissions.verListSettingsDel=true
            }
            if(a.permission=='#AttendanceExport'&&a.checked==='true'){
              this.allPermissions.AttendanceExport=true
            }
            
          })
        }
      });
    },
    async getDataList () {
      // 通过vuex调接口获取公司名depart是vuex中别的一套vuex模块
      const list = await this.$store.dispatch('depart/getList')

      let listString = JSON.stringify(list).replace(/"id"/g, '"value"')
      let listStringLabel = listString.replace(/"departName"/g, '"label"')
      let listStringChildren = listStringLabel.replace(/"children"/g, '"children"')
      var aParse = JSON.parse(listStringChildren)
      function dG(params) {
        params.forEach(v=>{
          if(v.children){
            dG(v.children)
          }else{
            v.children=[]
          }
        })
      }
      dG(aParse)
      if(aParse[0].label==="新部门"){
        let arr12 = aParse
        arr12[0].label=this.$t('title.newDepart')
        this.recordTypes=arr12
        this.recordTypes[0].label=this.$t('title.newDepart')
      }else{
        this.recordTypes = aParse
      }
      //console.log(this.recordTypes)
      this.getDelData()
    },
    handleChange (value) {
      //console.log(value)
      
      if (!value) {
        //console.log(this.recordType)
        //console.log(this.recordType.length)
        this.departsdata = this.recordType[this.recordType.length - 1]
        // //console.log(departsdata)
        this.searcName()
      }
    },
    handleChange1 (value) {
      // Change时候赋值给recordType  然后关闭级联下拉框可以选中
      console.log('woshi1====',value,this.recordType)

      if(value.length>0){
        this.recordType = value
      }else{
        this.departsdata=''
        this.getDelData()
      } 
    },
    handleChange2 (value) {
      console.log('2',value,this.recordType1)
      if (value) {
        this.recordType1=value
        this.departsdata1 = this.recordType1[this.recordType1.length - 1]
        this.getDayList()      
      }
    },
    handleChange3 (value) {
      // Change时候赋值给recordType  然后关闭级联下拉框可以选中
      console.log('woshi3',value,this.recordType1)

      if(value.length>0){
        this.recordType1 = value
      }else{
        this.departsdata1=''
        this.getDayList()
      } 
    },
    cutmoduleClick (e) {
      // //console.log(111)
      // //console.log(e.target.dataset.a)
      if (e.target.dataset.a == 1) {
        this.isDivActive = true
      } else if (e.target.dataset.a == 2) {
        // this.$Message.warning({
        //   content: '此功能暂未开放',
        //   duration: 5,
        // })
        // return
        this.isDivActive = false
      }
    },

    clickMouth (obj) {
      //console.log(obj)
      this.clickMouthM = true
      this.customDay = obj.checkDate.split(',')
    },
    clickPerson (obj) {
      
      this.itemId=obj.id
      this.getDetail(obj.id)
      
    },
    async getDetail (areaId) {
      var parma = {id: areaId}
      const { success, data } = await detail(parma)
      if (success) {
        this.currentValue = data.data.personLableDto
        this.showClickPerson = true
      }else{
        this.$Message.error(this.$t('staffIndex.stafferror'))
      }
    },
    async handleDeleteGroupMember (mid,idx) {
      var parma = {checkGroupId: this.itemId,mid:mid}
      const { success, data } = await deleteGroupMember(parma)
      if (success) {
        this.currentValue.splice(idx,1)
        this.$Message.success(this.$t('devicesListSettings.devListDel')+this.$t('Attendance.AttendanceStaffAttendance')+this.$t('staffIndex.staffDepaUser2'))
      }else{
        this.$Message.error(this.$t('staffIndex.stafferror'))
      }
    },
    modelChange(e){
      // console.log(e)
      if(!e){
        this.currentValue=[]
        this.$_page_update()
      }
    },
    showCreate () {
      this.ifCreate = true
    },
    closeCreate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifCreate = false
    },

    showUpdate (item) {
      this.ifUpdate = true
      this.editItem = item
    },
    closeUpdate (ifUpdated) {
      ifUpdated && this.$_page_update()
      this.ifUpdate = false
    },

    handleSelection (selection = []) {
      this.selection = selection
    },
    handleSelectionAllStatus (status) {
      this.$refs.table.selectAll(status)
    },

    handleSettingsClick (name, row) {
      switch (name) {
        case 'edit':
          this.showUpdate(row)
          break
        case 'del':
          this.handleDel(row)
          break
      }
    },

    handleSelectionError (selection = []) {
      //console.log(selection)

      this.selection = selection
    },
    pageChangeError (page) {
      this.pageError = page
      this.isExcelTrue = '1'
      this.getDelData()
    },
    pageSizeChangeError (pageSize) {
      this.pageSizeError = pageSize
      if (this.pageError ==1) {
        this.isExcelTrue = '1'
        this.getDelData()
      }
    },
    searcName () {
      this.pageError = 1
      this.isExcelTrue = '1'
      this.getDelData()
    },
    // 导出
    staffTransferClick () {
      this.isExcelTrue = '2'
      this.getDelData()
    },
    async getDelData () {
      let language = localStorage.getItem('language') || 'zh'
      switch (language) {
        case 'zh':
          language = 1
          break
        case 'zf':
          language = 2
          break
        case 'en':
          language = 3
          break
        case 'ja':
          language = 4
          break
        case 'ko':
          language = 5
          break
      }
      let searchTime = format(this.searchcustomDay, 'yyyy-MM')
      //isExcel 1-统计报表,2-导出excel
      // console.log('isExcel4',isExcel,isExcel1)
      const { success, data } = await statisticalList({
        page: this.pageError,
        limit: this.pageSizeError,
        isExcel: this.isExcelTrue,
        language: language,
        startDate: searchTime,
        departId: this.departsdata,
        username: this.searchareaNameS,
      })
      if (success) {
        if (this.isExcelTrue == 2) {
          window.open(getExcel(data.msg))
          this.isExcelTrue='1'
          return
        }
        let list = []
        let total = 0
        // //console.log(data)
        list = data.data
        // page = data.pageNum || 1
        total = +data.count //+字符串转数字
        this.listError = list
        // this.page = page
        // this.pageSize = query.pageSize
        this.totalError = total
      }else{
        if(data=='免费版不支持导出'){
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr1'))
        }else if(data=='免费版不支持导出'){
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr2'))
        }else{
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr'))
        }
      }
    },



    async getData (query) {
      var that = this
      const { success, data } = await getList({
        page: query.page,
        limit: query.pageSize,
        username: that.areaNameS,
      })
      let list = []
      let page = 1
      let total = 0
      if (success) {
        if (data.data.length) {
          data.data.forEach((item, index) => {
            item.searchResults = that.areaNameS
          })
        }
        list = data.data
        page = data.pageNum || 1
        total = data.count
      }
      this.list = list
      this.page = page
      this.pageSize = query.pageSize
      this.total = total
    },
    async handleDel (item) {
      this.$Modal.confirm({
        title: this.$t('Attendance.AttendanceSDel'),
        // content: this.$t('devicesIndex.devStrDelEquipmentIsNew') + item.areaName + this.$t('areaIndex.areaAddDelIs'),
        content: this.$t('Attendance.AttendanceSDelIs'),
        onOk: async () => {
          const { success } = await del({ id: item.id })
          if (success) {
            this.$Message.success(this.$t('versionIndex.verDelBtnSucc'))
            this.$_page_update()
          } else {
            this.$Message.error(this.$t('versionIndex.verDelBtnF'))
          }
        },
      })
    },
    
    changeIndex(name){
      this.AttendanceType=name;
      console.log('this.isExcelTrueDay',this.isExcelTrueDay)
      if(name=="AttendanceDay"){
        this.isExcelTrueDay='1'
        this.getWeekDate()
        // this.getDayList()
      }
    },
    getWeekDate(){
      var myDate = new Date(); 
      var befordata = myDate.getTime()-6*24*3600*1000
      function timestampToTime(timestamp) {
        var date = new Date(timestamp);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
        var Y = date.getFullYear() + '-';
        var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
        var D = date.getDate()<10 ? '0'+date.getDate() : date.getDate();
        return Y+M+D;
      }
      let beginTime=(timestampToTime(befordata));
      var year = myDate.getFullYear(); 
      var month = myDate.getMonth()+1;
      var day = myDate.getDate();//获取当前日（1-31） 
      if (month<10) { month = "0" + month; } 
      if (day >= 0 && day <= 9) {
        if (day == 1) {
        month = myDate.getMonth()
        if(month==0) {
        month=12; year=year-1; 
        }
        day = new Date(year, month, 0).getDate ();
        } else {
        day = day < 10 ? "0" + day : day 
        } 
      }
      var days = day-6;
      days = days<10 ? "0"+days:days;
      let endTime = year+"-"+month + "-" + day;
      this.searchcustomDay1=[beginTime,endTime]
    },
    //普通考勤日报表
    async getDayList () {
      let aTime='',oTime=''
      if (this.searchcustomDay1[0]) {
        aTime = format(this.searchcustomDay1[0], 'yyyy-MM-dd')
        oTime = format(this.searchcustomDay1[1], 'yyyy-MM-dd')
      } else {
        aTime=""
        oTime=""
      }
        let language = localStorage.getItem('language') || 'zh'
        switch (language) {
        case 'zh':
          language = 1
          break
        case 'zf':
          language = 2
          break
        case 'en':
          language = 3
          break
        case 'ja':
          language = 4
          break
        case 'ko':
          language = 5
          break
        }
      
      // let isExcel1='1'
      // if(isExport){
      //   isExcel1='2'
      //   console.log('riisExcel2456677',isExport)
      // }
      var data11 = {
        page:this.pageDay,
        limit:this.pageSizeDay,
        startDate:aTime,
        endDate:oTime,
        departId: this.departsdata1,
        username: this.searchareaNameS1,
        isExcel: this.isExcelTrueDay,
        language: language,
      }
      const { success, data } = await getDayList(data11)
      if (success) {
        if (this.isExcelTrueDay == 2) {
          window.open(getExcel(data.msg))
          this.isExcelTrueDay='1'
          return
        }
        let list2 = []
        let total2 = 0
        // //console.log(data)
        list2 = data.data
        let page = data.pageNum || 1
        total2 = +data.count //+字符串转数字
        this.listDay = list2
        this.pageDay = page
        // this.pageSize2 = query.pageSize
        this.totalDay = total2
      }
      else{
        if(data=='免费版不支持导出'){
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr1'))
        }else if(data=='免费版不支持导出'){
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr2'))
        }else{
          this.$Message.error(this.$t('BodyTemperatureIndex.BodyTemAnimalRecordErr'))
        }
      }
    },
    staffTransferClickDay(){
      this.isExcelTrueDay='2';
      this.getDayList()
    },
    pageChangeDay (page) {
      this.pageDay = page
      this.getDayList()
    },
    pageSizeChangeDay (pageSize) {
      this.pageSizeDay = pageSize
      this.getDayList()
    },

    // 考勤日報表
    // mockTableData2 () {
    //   let data = [];
    //   function getNum() {
    //       return Math.floor(Math.random () * 10000 + 1);
    //   }
    //   for (let i = 0; i < 20; i++) {
    //       data.push({
    //           name: 'Name ' + (i+1),
    //           fav: 0,
    //           show: getNum(),
    //           weak: getNum(),
    //           signin: getNum(),
    //           click: getNum(),
    //           active: getNum(),
    //           day7: getNum(),
    //           day30: getNum(),
    //           tomorrow: getNum(),
    //           day: getNum(),
    //           week: getNum(),
    //           month: getNum()
    //       })
    //   }
    //   return data;
    // },
    // getTable2Columns () {
    //   const table2ColumnList = {
    //       name: {
    //           title: 'Name',
    //           key: 'name',
    //           fixed: 'left',
    //           width: 200,
    //           render: (h, params) => {
    //             console.log('123',this.tableData2[params.index])
    //               const fav = this.tableData2[params.index].fav;
    //               const style = fav === 0 ? {
    //                   cursor: 'pointer',
    //                   // overflowY: 'scroll'
    //               } : {
    //                   cursor: 'pointer',
    //                   color: '#f50',
    //                   // overflowY: 'scroll'
    //               };

    //               return h('div', [
    //                   h('Icon', {
    //                       style: style,
    //                       props: {
    //                           type: fav === 0 ? 'ios-star-outline' : 'ios-star'
    //                       },
    //                       nativeOn: {
    //                           click: () => {
    //                               this.toggleFav(params.index);
    //                           }
    //                       }
    //                   }),
    //                   h('span', ' ' + params.row.name)
    //               ]);
    //           }
    //       },
    //       show: {
    //           title: 'Show',
    //           key: 'show',
    //           width: 150,
    //           sortable: true
    //       },
    //       weak: {
    //           title: 'Weak',
    //           key: 'weak',
    //           width: 150,
    //           sortable: true
    //       },
    //       signin: {
    //           title: 'Signin',
    //           key: 'signin',
    //           width: 150,
    //           sortable: true
    //       },
    //       click: {
    //           title: 'Click',
    //           key: 'click',
    //           width: 150,
    //           sortable: true
    //       },
    //       active: {
    //           title: 'Active',
    //           key: 'active',
    //           width: 150,
    //           sortable: true
    //       },
    //       day7: {
    //           title: '7, retained',
    //           key: 'day7',
    //           width: 150,
    //           sortable: true
    //       },
    //       day30: {
    //           title: '30, retained',
    //           key: 'day30',
    //           width: 150,
    //           sortable: true
    //       },
    //       tomorrow: {
    //           title: 'The next day left',
    //           key: 'tomorrow',
    //           width: 150,
    //           sortable: true
    //       },
    //       day: {
    //           title: 'Day Active',
    //           key: 'day',
    //           width: 150,
    //           sortable: true
    //       },
    //       week: {
    //           title: 'Week Active',
    //           key: 'week',
    //           width: 150,
    //           sortable: true
    //       },
    //       month: {
    //           title: 'Month Active',
    //           key: 'month',
    //           width: 150,
    //           sortable: true
    //       }
    //   };
    //   let data = [table2ColumnList.name];
    //   this.tableColumnsChecked.forEach(col => data.push(table2ColumnList[col]));
    //   return data;
    // },
    // changeTableColumns () {
    //   this.tableColumns2 = this.getTable2Columns();
    // },
    // toggleFav (index) {
    //   this.tableData2[index].fav = this.tableData2[index].fav === 0 ? 1 : 0;
    //   // console.log(this.tableData2[index].fav)
    // },
  },
  computed: {
    btnShow () {
      return this.$store.state.btnShow
    },
  },
  watch: {
    searchcustomDay: 'searcName',
    searchcustomDay1: 'getDayList',
    btnShow () {
      this.columns = [
        // { type: 'selection' },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_method,
        },
        {
          title: this.$t('Attendance.AttendanceName'),
          key: 'name',
        },
        {
          title: this.$t('Attendance.AttendanceShift'),
          key: 'startTime',
          render (h, { row }) {
            let label = '-'
            if (row.startTime && row.endTime) {
              label = `${row.startTime}-${row.endTime}`
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('Attendance.AttendanceData'),
          key: 'checkDate',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let labelBtn = ''
            var that = this
            if (row.checkDate) {
              // //console.log(newArr)
              label = row.checkDate
            }
            if (row.checkType == 0) {
              labelBtn = ''
              let aWeek = [this.$t('Attendance.AttendanceMonday'), this.$t('Attendance.AttendanceTuesday'), this.$t('Attendance.AttendanceWednesday'), this.$t('Attendance.AttendanceThursday'), this.$t('Attendance.AttendanceFriday'), this.$t('Attendance.AttendanceSaturday'), this.$t('Attendance.AttendanceSUN')]
              let weekD = label.split(',')
              let newWeek = ''
              weekD.forEach((item, index) => {
                newWeek += aWeek[item - 1] + ','
              })
              //console.log(newWeek)
              label = `${this.$t('Attendance.AttendanceCyclic')}：${newWeek}`
            } else {
              var aMouth = [
                { mouthData: '', mouth: '01', mouthNum: this.$t('Attendance.AttendanceOne') },
                { mouthData: '', mouth: '02', mouthNum: this.$t('Attendance.AttendanceTwo') },
                { mouthData: '', mouth: '03', mouthNum: this.$t('Attendance.AttendanceThree') },
                { mouthData: '', mouth: '04', mouthNum: this.$t('Attendance.AttendanceFour') },
                { mouthData: '', mouth: '05', mouthNum: this.$t('Attendance.AttendanceFive') },
                { mouthData: '', mouth: '06', mouthNum: this.$t('Attendance.AttendanceSix') },
                { mouthData: '', mouth: '07', mouthNum: this.$t('Attendance.AttendanceSever') },
                { mouthData: '', mouth: '08', mouthNum: this.$t('Attendance.AttendanceEight') },
                { mouthData: '', mouth: '09', mouthNum: this.$t('Attendance.AttendanceNine') },
                { mouthData: '', mouth: '10', mouthNum: this.$t('Attendance.AttendanceTen') },
                { mouthData: '', mouth: '11', mouthNum: this.$t('Attendance.AttendanceEleven') },
                { mouthData: '', mouth: '12', mouthNum: this.$t('Attendance.AttendanceTwelve') },
              ]
              var aMa = label.split(',')
              aMa.forEach((item, index) => {
                aMouth.forEach((item1, index1) => {
                  var aItem = item.split('-')
                  if (item1.mouth == aItem[1]) {
                    item1.mouthData += aItem[2] + '、'
                  }
                })
              })
              //console.log(aMouth)
              let aData = ''
              aMouth.forEach((item, index) => {
                if (item.mouthData) {
                  aData+=item.mouthNum+'：'+item.mouthData
                }
              })
              //console.log(aData)
              //console.log(aData.length)
              if (aData.length > 50) {
                aData = aData.slice(0,50) + '...'
              }
              //console.log(aData)
              label = aData
              labelBtn = this.$t('Attendance.AttendanceReadMore')
            }
            // return h('div', label)
            return h('div',[
              h ('span',
                {
                  style: { },
                  //就是这里加的属性
                  domProps: {
                    // title: label,
                  }
                },
                  label
              ),h('div',
                {
                  style: { color: '#2d8cf0', cursor: 'pointer'},
                  props: { row },
                  on: {
                    click: (e) => {
                      this.clickMouth(row)
                    }
                  },
                }, ' ' + labelBtn),
            ],)
          },
        },
       {
          title: this.$t('Attendance.AttendanceStaffAttendance'),
          key: 'username',
          // render (h, { row }) {
          render: (h, { row }) => {
            let label = '-'
            let btnLabel = this.$t('areaIndex.areaAddExamine')
            var that = this
            if (row.username) {
              let newArr = row.username
              // //console.log(newArr)
              label = row.username.split(',')
              // if (newArr.length > 4) {
              //   var aLenth = label.length
              //   label = label.slice(0, 4)
              //   //console.log(label)
              //   label = `${label.join()}...${this.$t('Attendance.AttendanceWait')}${aLenth}${this.$t('Attendance.AttendancePersonage')}`

              // } else {
              //   label = label.join()
              // }
              // //console.log(newArr.length)
              label = row.username.split(',')
              if (newArr.length > 10) {
                var aLenth = row.count
                newArr = newArr.slice(0, 10)
                label = `${newArr}...${this.$t('Attendance.AttendanceWait')} ${aLenth} ${this.$t('Attendance.AttendancePersonage')}`
              }else{
                label = newArr
              }
            }
            // return h('div', label)
            return h('div',[
           h(
              'span',
                {     
                      style: { },
                   //就是这里加的属性
                  domProps: {
                    //  title: label
                   }
              },
               label
              ),h(
              'span',
                {     
                  style: { color : '#2d8cf0'},
                   props: { row },
              },
               ' '),
               h(
              'Button',
                {  
                  style: { padding:'1px',color:'#2d8cf0',display:row.username?'inline-block':'none'},
                  props: { row,size:'small',type:"text"},
                  on: {
                    click: (e) => {
                      this.clickPerson(row)
                    }
                  },
              },
               btnLabel
              ),
              ],)
          },
        },
        {
          title: this.$t('devicesIndex.devTableoperation'),
          key: 'settings',
          width: 200,
          render: (h, { row }) => {
            return h(ListSettings, {
              props: { row ,allPermissions:this.allPermissions},
              on: {
                itemClick: (name) => this.handleSettingsClick(name, row),
              },
            })
          },
        },
      ]
      this.columnsError = [
        // {
        //   type: 'selection',
        //   width: 60,
        // },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_methodErr,
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'photo',
          width: 140,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'username',
        },
        {
          title: this.$t('BodyTemperatureIndex.BodyTemAnimalDepartment'),
          key: 'departName',
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
        },
        {
          title: this.$t('Attendance.AttenddeserveWorkDays'),
          key: 'deserveWorkDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeserveWorkDays')}`,
                    // title: `${this.$t('Attendance.AttenddeserveWorkDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeGooutDays'),
          key: 'deservePayAndTripGooutDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeGooutDays')}`,
                    // title: `${this.$t('Attendance.AttenddeGooutDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeabsenceDays'),
          key: 'absenceDays',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeabsenceDays')}`,
                    // title: `${this.$t('Attendance.AttenddeabsenceDays')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddelateCount'),
          key: 'lateCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddelateCount')}`,
                    // title: `${this.$t('Attendance.AttenddelateCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.AttenddeearlyCount'),
          key: 'earlyCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeearlyCount')}`,
                    // title: `${this.$t('Attendance.AttenddeearlyCount')}`,
                  },
                }),
              ])
          },
        },
      ]
      this.columnsDay= [
        // {
        //   type: 'selection',
        //   width: 60,
        // },
        {
          type: 'index',
          width: 60,
          indexMethod: this.$_index_methodErr,
        },
        {
          title: this.$t('Attendance.AttendanceData'),
          key: 'inDate',
        },
        {
          title: this.$t('staffIndex.staffDepartPhoto'),
          key: 'photo',
          width: 140,
          render: (h, { row }) => {
            if (!row.photo || row.photo === '') {
              return h('div', '-')
            }
            return h('div', {
              class: 'img-area',
            }, [

              h('Tooltip', {
                props: {
                  placement: 'right-start',
                  transfer: true,
                }
              }, [
                h('viewer', [
                  h('img', {
                    style: {
                      cursor: 'pointer',
                    },
                    attrs: {
                      src: getPhoto(row.photo),
                    },
                  }),
                ]), h('span', {
                  slot: 'content',
                  style: {
                    whiteSpace: 'normal',
                  }
                }, this.$t('title.clickBig')),

              ])
            ])
          },
        },
        {
          title: this.$t('staffIndex.staffphotosName'),
          key: 'username',
        },
        {
          title: this.$t('BodyTemperatureIndex.BodyTemAnimalDepartment'),
          key: 'departName',
          render: (h, { row }) => {
            let label = row.departName
            if (row.departName=='新部门') {
              label = this.$t('title.newDepart')
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('AccessIndex.AccessJobNum'),
          key: 'worknum',
        },
        
        
        
        {
          title: this.$t('Attendance.AttenddelateCount'),
          key: 'lateCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddelateCount')}`,
                    // title: `${this.$t('Attendance.AttenddelateCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.lateTimes'),
          key: 'lateTimes',
        },
        {
          title: this.$t('Attendance.AttenddeearlyCount'),
          key: 'earlyCount',
          renderHeader: (h, params) => {
            return h('span',
              [
                h('span', {
                  style: {
                    display: 'inline-block',
                  },
                  domProps: {
                    innerHTML: `${this.$t('Attendance.AttenddeearlyCount')}`,
                    // title: `${this.$t('Attendance.AttenddeearlyCount')}`,
                  },
                }),
              ])
          },
        },
        {
          title: this.$t('Attendance.earlyTimes'),
          key: 'earlyTimes',
        },
        {
          title: this.$t('Attendance.beOnDutyDate'),
          key: 'beOnDutyDate',
          width:100
        },
        {
          title: this.$t('Attendance.beOnDuty'),
          key: 'beOnDuty',
          render: (h, { row }) => {
            let label = '-'
            if (row.beOnDuty) {
              if(row.beOnDuty=='Normal'){
                label = `${this.$t('Attendance.Normal')}`
              }
              else if(row.beOnDuty=='Early'){
                label = `${this.$t('Attendance.Early')}`
              }
              else if(row.beOnDuty=='Late'){
                label = `${this.$t('Attendance.Late')}`
              }
              else if(row.beOnDuty=='NoTime'){
                label = `${this.$t('Attendance.NoTime')}`
              } 
              else if(row.beOnDuty=='NotScheduling'){
                label = `${this.$t('Attendance.NotScheduling')}`
              } 
            }
            return h('div', label)
          },
        },
        {
          title: this.$t('Attendance.offDutyDate'),
          key: 'offDutyDate',
          width:100
        },
        {
          title: this.$t('Attendance.offDuty'),
          key: 'offDuty',
          render: (h, { row }) => {
            let label = '-'
            if (row.offDuty) {
              if(row.offDuty=='Normal'){
                label = `${this.$t('Attendance.Normal')}`
              }
              else if(row.offDuty=='Early'){
                label = `${this.$t('Attendance.Early')}`
              }
              else if(row.offDuty=='Late'){
                label = `${this.$t('Attendance.Late')}`
              }
              else if(row.offDuty=='NoTime'){
                label = `${this.$t('Attendance.NoTime')}`
              }
              else if(row.beOnDuty=='NotScheduling'){
                label = `${this.$t('Attendance.NotScheduling')}`
              } 
            }
            return h('div', label)
          },
        },
      ]
      this.recordTypes[0].label=this.$t('title.newDepart')
      return this.$store.state.btnShow
    }
  },
}
</script>

<style lang="less" scoped>
.setting-area {
  .clearfix();

  .btns {
    float: right;
  }
  .title {
    line-height: @lh-base;
    font-size: 14px;
    font-weight: bold;
    display:inline-block;
  }
}
.index-time-choose-f {
		width:320px;
		height:260px;
		margin:10% auto;
		position:relative;
	}
	.index-time-choose {
		width:0px;
		height:0px;
		position:absolute;
		top:-40px;
		left:50px;
		right:0;
		bottom:0;
	}
	.index-time {
		.ivu-date-picker-rel {
			visibility:hidden !important;
		}
		.ivu-select-dropdown {
			position:static!important;
			top:-20px !important;
			left:175px !important;
			right:0 !important;
			bottom:0 !important;
			transform:scale(1.5);
		}
		.ivu-date-picker-cells-cell em {
			transform:scale(.7);
		}
		.ivu-date-picker-cells-cell:nth-child(14n+1),
		.ivu-date-picker-cells-cell:nth-child(14n-5),
		.ivu-date-picker-cells-cell:nth-child(14n-4),
		.ivu-date-picker-cells-cell:nth-child(14n-3),
		.ivu-date-picker-cells-cell:nth-child(14n-2),
		.ivu-date-picker-cells-cell:nth-child(14n-1),
		.ivu-date-picker-cells-cell:nth-child(14n){
			background:#F7FDFE;
		}
		.ivu-date-picker-cells-header {
			border-bottom:0.5px #DCDCDC solid;
			span {
				transform:scale(.8);
				color:#606266;
			}
			span:first-child,
			span:last-child{
				transform:scale(.8);
				color:#DCDCDC;
			}
		}
		.ivu-date-picker-header {
			border:none;
			margin-bottom:-5px;
			span.ivu-picker-panel-icon-btn {
				transform:scale(.8);
			}
		}
		.ivu-date-picker-cells-focused em {
		    box-shadow: 0 0 0 1px #2d8cf0 inset;
			background:#2d8cf0;
			color:#ffffff;
		}
  }
  .index-time /deep/ .ivu-input-wrapper { display: none; }
  .cutmodule{
    width: 100%;
    line-height: 40px;
    background: #fff;
  }
  .cutmodule div{
    display: inline-block;
    padding: 0 14px;
    text-align: center;
    font-size: 15px;
    position: relative;
    cursor: pointer;
    font-weight: 600;
  }
  .divActive{
    color: #2d8cf0;
  }
  .cutmodule .divActive::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 2px;
    background: #2d8cf0;
  }
  .list-area{
    margin-top: 10px;
  }
  /deep/ .ivu-date-picker-cells-header span{
    white-space: nowrap;
    font-size: 13px;
  }
  /deep/ .img-area {
    width: 100px;
    height: 100px;
    margin: 6px 0;
    box-sizing: content-box;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
  .modalClass1{
    /deep/ .ivu-modal-body{
      padding-top: 0;
    }
    
  }
  .person-list {
    // flex: 1;
    max-height: 400px;
    overflow: auto;
    border: 1px solid #ccc;
    box-sizing: border-box;
    padding: 10px;
    .person-item{
      height:32px;
      .item-icon{
        vertical-align: middle;
        display: inline-block;
      }
      .item-title{
        // display: inline;
        display: inline-block;
        margin-left: 10px;
        // color:red;
      }
      .fl{
        float: right;
        color:#2d8cf0;
        cursor: pointer;
      }
      .close-icon{
        float: right;
      }
      
    }
  }
  .tipTitle{
    width: 100%;
    height: 22px;
    .del{
      float: right;
    }
  }
  
</style>
